---
id: 61537c5f81f0cf325b4a854c
title: الخطوة 4
challengeType: 0
dashedName: step-4
---

# --description--

أضف عنصر `header` داخل عنصر `body` وعيّن له فئة (class) بقيمة `header`.

داخل `header`، أنشئ `h1` مع نص `css flexbox photo gallery`.

# --hints--

يجب أن يكون لديك عنصر `header` داخل عنصرك `body`.

```js
assert.exists(document.querySelector('body')?.querySelector('header'));
```

يجب أن يحتوي عنصرك `header` على `class` يسمى `header`.

```js
assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
```

يجب أن يحتوي عنصرك `header` على عنصر `h1` داخله.

```js
assert.exists(document.querySelector('.header')?.querySelector('h1'));
```

يجب أن يحتوي عنصر `h1` على النص `css flexbox photo gallery`.

```js
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
```

# --seed--

## --seed-contents--

```html
--fcc-editable-region--
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
  </body>
</html>
--fcc-editable-region--
```

```css

```
